そろそろConcurrent Modeを真面目に考えよう
終了した駄文
モチベーション
注意
「Promiseをthrowするんだよね」とか「Suspenseでフォールバックを表示するんだよね」とか「startTransitionで状態変化前と変化後を分岐させるんだよね」みたいなことを知っていればいい 原則
非同期なデータを扱うオブジェクトを使う
このようなオブジェクトの実装例として
Promiseを受け取り、状態に合わせてgetでPromiseをthrowしたり値を返したりします
QueryReferenceやFragmentReference
などが挙げられるでしょう。
AmamoではFetcher<T>と同様の実装をLoadable<T>という名前で利用しました。 これもう少し研究が必要だな、だめそうだったら記事から外すか
react-cache がreact内に含まれるようになったとか全く聞いてないが
FlightResponseが非同期状態管理オブジェクトで，.readRoot()でReactElementを返す
非同期処理の実行と結果の利用を分離する
非同期処理(というかIO)が実行されるとき、アプリケーションでは必ずと言っていいほど何らかのイベントが発生しています。
useEffectでマウント時に実行させているぞ！という人もいるかもしれませんが、その背後ではより重要なイベントが発生しています。本来はそのタイミングで非同期処理を実行すべきでしょう。
ページ遷移(リンクのクリック、戻る操作など)、後述します
そこで、上位のコンポーネントではイベントに沿って非同期処理を実行して非同期データを状態として保持し、下位のコンポーネントでは非同期データの結果を利用するようにします。このことによって、今までContainer Componentと呼ばれていたものが2種類に分かれることになります。 1. イベントをハンドリングし、実際に非同期処理を実行するコンポーネント
RelayにおいてはuseQueryLoaderを持つコンポーネントがこの役割を持ちます ReduxでuseDispatchを利用しているコンポーネント 2. 自身に必要なデータを宣言し、利用するコンポーネント
RelayにおいてはusePreloadedQueryやuseFragmentを持つコンポーネントがこの役割を持ちます usePreloadedQueryはloadQueryやuseQueryLoaderとセットなので独立はしていなさそう。useFragmentは汎用的
ReduxでuseSelectorを利用しているコンポーネント